{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}政策展示{% endblock %}
{% block custom_bread %}
{% endblock %}
{% block custom_css %}
    <link rel="stylesheet" href="{% static 'css/policy.css' %}">
{% endblock %}
{% block content %}
    <section class="container module">
        {#头条#}

        <div class="row">
            <div class="col-md-7">
                <a class="toutiao-title" href="/policy/banner/{{ banner_main.id }}/">{{ banner_main.title }}</a>
                <p class="toutiao-sym">“</p>
                <p class="toutiao-content">{{ banner_main.detail }}</p>
                <p class="pull-right toutiao-sym">”</p>
            </div>
            <div class="col-md-5">
                <img class="toutiao-img" src="{{ MEDIA_URL }}{{ banner_main.pic }}"/>
            </div>
        </div>


        <div class="toutiao-list row">
            <div class="toutiao-list-title col-md-2">
                <div class="module-title-box toutiao-module-title">
                    <span class="module-title-text-bar">
                            </span>
                    <span class="module-title-text">
                                平台新闻
                            </span>
                </div>
            </div>
            <div class="toutiao-list-content col-md-10">
                {% for banner_ in banners %}
                    <li class="  toutiao-item">
                        <a class="toutiao-item-title"
                           href="/policy/banner/{{ banner_.id }}/">{{ banner_.title }}</a>
                        <span class="toutiao-item-time"> {{ banner_.pubDate }}</span>
                    </li>
                {% endfor %}
            </div>
        </div>


    </section>
    <section class="container module">
        {#政策列表#}
        <div class="">
            <span class="module-title">
                <div class="module-title-box  pull-left">
                    <span class="module-title-text-bar">
                            </span>
                    <span class="module-title-text">
                                政策跟踪
                            </span>
                </div>
                <a class="module-more pull-right"
                   href="{% url 'policy:list' %}">更多</a>
            </span>
            <div class="policy-list">
                {% for policy in policy_list %}
                    <div class="policy-item">
                    <span class="policy-item-title"><a
                            href="/policy/detail/{{ policy.policy_id }}/">{{ policy.title }}</a></span>
                        <span class="policy-item-source">{{ policy.addr }}{{ policy.source }} </span><span
                            class="policy-item-time">{{ policy.pubDate }}</span>
                    </div>
                {% endfor %}
            </div>

        </div>
    </section>
    <section class="container module">
        {#表格#}
        <div class="" id="chartBox">
            <span class="module-title">
                <div class="module-title-box">
                    <span class="module-title-text-bar">
                            </span>
                    <span class="module-title-text">
                                数据统计
                            </span>
                </div>
            </span>
            <div class="col-md-12 row">
                <div id="chartBox1" class="chart-box chart-box-left">
                </div>
                <div id="chartBox2" class="chart-box chart-box-right">
                </div>
            </div>
            <div class="col-md-12 row">
                <div id="chartBox3" class="chart-box chart-box-left">
                </div>
                <div id="chartBox4" class="chart-box chart-box-right">
                </div>
            </div>
            <div class="col-md-12 row">
                <div id="chartBox5" class="chart-box chart-box-bottom">
                </div>
            </div>
        </div>


    </section>

{% endblock %}
{% block custom_js %}
    <script src="{% static 'js/echarts/echarts.min.js' %}"></script>

    <script type="text/javascript">
        genOption = (titleText, type, data) => {
            data = JSON.parse(data)
            let option = {}
            let item = {};
            switch (type) {
                case 'pie':
                    let dataPieArray = []
                    console.log(data)
                    let minValue = -10000000;
                    let maxValue = +10000000;
                    data.forEach(dataItem => {
                        if (minValue > dataItem[1]) {
                            minValue = dataItem[1]
                        }
                        if (maxValue < dataItem[1]) {
                            maxValue = dataItem[1]
                        }
                        let item = {};
                        console.log(dataItem)
                        item.name = dataItem[0];
                        item.value = dataItem[1];
                        dataPieArray.push(item)
                    })
                    console.log(dataPieArray)
                    option = {
                        backgroundColor: '#fff',

                        title: {
                            text: titleText,
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#4d4d4d'
                            }
                        },

                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },

                        visualMap: {
                            show: false,
                            min: minValue,
                            max: maxValue,
                            inRange: {
                                colorLightness: [0, 1]
                            }
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '50%'],
                                data: dataPieArray.sort(function (a, b) {
                                    return a.value - b.value;
                                }),
                                roseType: '',
                                label: {
                                    normal: {
                                        textStyle: {
                                            color: 'rgba(0, 0, 0, 0.6)'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            color: 'rgba(0, 0, 0, 0.3)'
                                        },
                                        smooth: 0.2,
                                        length: 10,
                                        length2: 20
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#3fa8f4', //color:'#3fa8f4',//color:'#ff921e',
                                        shadowBlur: 100,
                                        shadowColor: 'rgba(0, 0, 0, 0.2)'
                                    }
                                },

                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function (idx) {
                                    return Math.random() * 200;
                                }
                            }
                        ]
                    };

                    break;
                case 'bar':
                    let dataBarAxis = []
                    let dataBar = []
                    let dataShadow = [];
                    data.forEach(dataItem => {
                        dataBarAxis.push(dataItem[0])
                        dataBar.push(dataItem[1])
                        dataShadow.push(500)
                    })
                    option = {
                        grid: {
                            left: 100,
                        },
                        title: {
                            text: titleText,
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#4d4d4d'
                            },
                            subtext: ''
                        },

                        tooltip: {
                            trigger: 'axis',

                        },
                        xAxis: {
                            data: dataBarAxis,
                            axisLabel: {
                                inside: false,
                                textStyle: {
                                    color: '#666'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            z: 10,

                            max: 'dataMax',
                        },
                        yAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#666'
                                }
                            },
                            max: 'dataMax',
                        },

                        series: [

                            {
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#83bff6'},
                                                {offset: 0.5, color: '#188df0'},
                                                {offset: 1, color: '#188df0'}
                                            ]
                                        )
                                    },
                                    emphasis: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#2378f7'},
                                                {offset: 0.7, color: '#2378f7'},
                                                {offset: 1, color: '#83bff6'}
                                            ]
                                        )
                                    }
                                },
                                data: dataBar
                            }
                        ]
                    };
                    break;
                case 'bar2':
                    let dataBar2Axis = []
                    let dataBar2 = []
                    let dataShadow2 = [];
                    data.forEach(dataItem => {
                        dataBar2Axis.push(dataItem[0])
                        dataBar2.push(dataItem[1])
                        dataShadow2.push(500)
                    })
                    option = {
                        grid: {
                            left: 100,
                        },
                        title: {
                            text: titleText,
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#4d4d4d'
                            }
                        },

                        tooltip: {
                            trigger: 'axis',

                        },
                        yAxis: {
                            data: dataBar2Axis,
                            axisLabel: {
                                inside: false,
                                textStyle: {
                                    color: '#666',
                                    left: 'center',
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            z: 10,
                            max: 'dataMax',
                        },
                        xAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#666'
                                }
                            },

                            max: 'dataMax',
                        },

                        series: [

                            {
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            1, 1, 0, 0,
                                            [
                                                {offset: 0, color: '#83bff6'},
                                                {offset: 0.5, color: '#188df0'},
                                                {offset: 1, color: '#188df0'}
                                            ]
                                        )
                                    },
                                    emphasis: {
                                        color: new echarts.graphic.LinearGradient(
                                            1, 1, 0, 0,
                                            [
                                                {offset: 0, color: '#2378f7'},
                                                {offset: 0.7, color: '#2378f7'},
                                                {offset: 1, color: '#83bff6'}
                                            ]
                                        )
                                    }
                                },
                                data: dataBar2
                            }
                        ]
                    };
                    break;
                case 'line':
                    let map = {};
                    let title = [];
                    let time = [];
                    console.log(data);
                    data.sort(function (x, y) {
                        return x[1].localeCompare(y[1]);
                    });
                    data.sort(function (x, y) {
                        return x[0] - y[0];
                    });

                    data.forEach((item, index) => {
                        const key = item[1];
                        if (!map[key]) {  // 按key来进行分类
                            map[key] = {
                                name: key,
                                type: 'line',
                                stack: '总量',
                                data: []
                            }
                            title.push(key)
                        }
                        if (time.indexOf(item[0]) === -1) {
                            time.push(item[0])
                        }
                        map[key].data.push(item[2]
                        );
                    })
                    console.log(map)
                    console.log(title)
                    console.log(time)
                    let aa = []
                    title.map((t, i) => aa.push(map[t]))
                    console.log(aa)
                    option = {
                        title: {
                            text: titleText,
                            left: 'center',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#4d4d4d'
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: title
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: '',
                            boundaryGap: false,
                            data: time
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: aa
                    };
                    break;
                case 'map':
                    let seriesData = []
                    data.forEach(dataItem => {
                        item.name = dataItem[0];
                        item.value = dataItem[1];
                        seriesData.push(item)
                    })
                    option = {
                        backgroundColor: '#FFFFFF',
                        title: {
                            text: '全国地图大数据',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#4d4d4d'
                            },
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },

                        //左侧小导航图标
                        visualMap: {
                            show: true,
                            x: 'left',
                            y: 'center',
                            splitList: [
                                {start: 500, end: 600}, {start: 400, end: 500},
                                {start: 300, end: 400}, {start: 200, end: 300},
                                {start: 100, end: 200}, {start: 0, end: 100},
                            ],
                            color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
                        },

                        //配置属性
                        series: [{
                            name: '数据',
                            type: 'map',
                            mapType: 'china',
                            roam: true,
                            label: {
                                normal: {
                                    show: true  //省份名称
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            data: seriesData  //数据
                        }]
                    };
                    break;
                default:
                    break;
            }
            return option
        }
        fillChartBoxData = (chartBoxIdSelector, tabName) => {
            $.ajax({
                cache: false,
                type: "get",
                url: "{% url "policy:chartData" %}",
                data: {'tab': tabName},
                async: true,
                success: function (charts) {
                    console.log(charts)
                    let chartBoxId = chartBoxIdSelector.slice(1)
                    $(chartBoxIdSelector).append('<span class="chart-tab">' + tabName + '</span>')
                    let i = 1;
                    let chartsBoxTitle = '<ul class="nav nav-tabs chart-tab-ul">'
                    let chartBoxTitle = ''
                    charts.map((chart, idx) => {
                        idx++;
                        console.log('idx', idx)
                        let chartTabId = chartBoxId + "Tab" + idx;
                        let chartTabClass = "chartTab";
                        if (idx === 1) {
                            chartBoxTitle = '<li id="' + chartTabId + '" class="' + chartTabClass + ' active"><a class="chart-tab2">' + chart.fields.tab2 + '</a></li>'

                        } else {
                            chartBoxTitle = '<li id="' + chartTabId + '" class="' + chartTabClass + '"><a class="chart-tab2">' + chart.fields.tab2 + '</a></li>'

                        }
                        chartsBoxTitle += chartBoxTitle
                    })
                    chartsBoxTitle += '</ul>'
                    $(chartBoxIdSelector).append(chartsBoxTitle)
                    charts.forEach((chart) => {
                        let chartId = chartBoxId + "-" + i;
                        let chartClass = chartBoxId + ""
                        let chartDiv = "<div id='" + chartId + "' class='" + chartClass + " ' style='height:300px;'></div>";
                        $(chartBoxIdSelector).append(chartDiv)
                        console.log(chartId, chartDiv)
                        console.log(chart.fields.type, chart.fields.data)
                        let theChart = echarts.init(document.getElementById(chartId));
                        let option = genOption(chart.fields.title, chart.fields.type, chart.fields.data)
                        theChart.setOption(option);
                        if (i !== 1) {
                            $("#" + chartId).addClass('dispear');
                        }
                        i++;
                    })
                },
            });

        }
        fillChartBoxData('#chartBox1', '科技成果库分析')
        fillChartBoxData('#chartBox2', '科研机构分析')
        fillChartBoxData('#chartBox3', '科研人才分析')
        fillChartBoxData('#chartBox4', '可转化成果分析')
        fillChartBoxData('#chartBox5', '应用技术成果分析')


        $(() => {
            setTimeout(
                () => {
                    $(".chartTab").click(function () {
                        let tabId = $(this).attr("id");
                        console.log('tabId', tabId)
                        let chartClass = tabId.slice(0, 9)
                        let id = tabId.slice(12)
                        console.log("#" + chartClass + "-" + id)
                        $(this).parent().children().removeClass('active')
                        $(this).addClass('active')
                        $("." + chartClass).addClass('dispear')
                        $("#" + chartClass + "-" + id).removeClass('dispear')
                    })
                }, 2000
            )
            $(".mainTab").click(function () {
                let tabId = $(this).attr("id");
                console.log('tabId', tabId)
                let chartClass = 'province'
                let id = tabId.slice(7)
                console.log("#" + chartClass + "-" + id)
                $(this).parent().children().removeClass('active')
                $(this).addClass('active')
                $("." + chartClass).addClass('dispear')
                console.log("." + chartClass, 'add dispear')
                $("#" + chartClass + id).removeClass('dispear')
                console.log("#" + chartClass + id, 'rm dispear')
            })

        });

    </script>
{% endblock %}